<template>
  <div class="w-bg">
    <!-- 顶部分类 -->
    <div class="top-category">
      <!-- 发文 收文 -->
      <div class="category-title">
        <div
          v-for="(item, i) in categoryArr"
          :key="i"
          :class="['title-item', state.categoryActive === 1 ? 'title-active' : '']"
          >{{ item }}</div
        >
      </div>
      <!-- 模板 记录 草稿 -->
      <div class="category-type">
        <span
          v-for="(item, i) in typeArr"
          :key="i"
          :class="['type-item', state.typeActive === i ? 'type-active' : '']"
          @click="onChangeType(i)"
        >
          <span>{{ item }}</span>
        </span>
      </div>
    </div>

    <!-- 分类内容区 -->
    <div class="type-content">
      <!-- 登记模板 -->
      <templateList v-if="state.typeActive === 0" :categroy-val="state.categoryActive" />
      <!-- 我登记的 -->
      <InitiateList v-else-if="state.typeActive === 1" :categroy-val="state.categoryActive" />
      <!-- 不知道是啥 -->
      <DraftBox v-else-if="state.typeActive === 2" :categroy-val="state.categoryActive" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import DraftBox from './draftBox/index.vue';
import InitiateList from './initiateList/index.vue';
import templateList from './templateList/index.vue';
// const categoryArr = reactive(['发文拟稿', '收文登记']);
// console.log(localStorage.getItem('公文收发'));
const categoryArr = reactive(['收文登记']);
// const typeArr = ref(['拟稿模板', '我发起的', '草稿箱']);
const typeArr = ref(['登记模板', '我登记的']);
const state = reactive({
  categoryActive: 1,
  typeActive: 0,
  themecolor: sessionStorage.getItem('primaryColor')
});
onMounted(() => {
  setTimeout(() => {
    // console.log(sessionStorage.getItem('startingActive'), 898989);
    // if (sessionStorage.getItem('tabsActive') === '公文收发') {
    if (sessionStorage.getItem('startingActive')) {
      // sessionStorage.getItem('startingActive')
      state.typeActive = sessionStorage.getItem('startingActive') * 1;
    } else {
      state.typeActive = 0;
    }
    // }
  }, 100);
});
// function onChangeCategory(categoryVal) {
//   if (state.categoryActive === categoryVal) {
//     return;
//   } else {
//     state.categoryActive = categoryVal;
//     onChangeType(0);
//   }

//   if (categoryVal === 0) {
//     typeArr.value = ['拟稿模板', '我发起的', '草稿箱'];
//   } else {
//     typeArr.value = ['登记模板', '我登记的', '草稿箱'];
//   }
// }
function onChangeType(typeVal) {
  if (state.typeActive === typeVal) {
    return;
  } else {
    state.typeActive = typeVal;
  }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
